<template>
  <!-- 上拉加载 
          van-list
            v-model:是否处于加载中
            finished:是否全部加载完成
            finished-text:加载完成后的提示
            @load
              接口请求
              请求完成后
                 a:数据累加
                 b:v-model的值改成false
                 c:调整下一页请求参数
                 d:判断是否全部加载 完成
                    finished=true   -->
  <!-- 发表评论:
        1:定义接口
        2:导入接口
        3:点击发送：调用接口
        4：调用接口成功
           a:加入刚发表评论
           b:提示
           c:输入框内容清空  -->
  <div class="comment">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <div class="item" v-for="item in list" :key="item.com_id">
        <img class="avatar" :src="item.aut_photo" alt="" />
        <div class="info">
          <div class="name">{{ item.aut_name }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="other">
            <span class="time">{{ item.pubdate | relvTime }}</span>
            <span @click="reClick(item)">回复({{ item.reply_count }})</span>
          </div>
        </div>
        <van-icon
          @click="likingClick(item)"
          :class="{ red: item.is_liking }"
          name="like-o"
        />
      </div>
    </van-list>
    <!-- 发送评论区域 -->
    <van-field
      class="send"
      placeholder="请输入评论内容"
      v-model.trim="content"
      clearable
    >
      <template #button>
        <van-button size="small" color="#1989fa" @click="send">发布</van-button>
      </template>
    </van-field>
    <!-- 回复评论组件 -->
    <!-- 父组件要修改子组件的一个值 
             ref:1：获取原生的dom
                 2:获取组件的this  -->
    <!--   父传子：
          子组件标签  :属性名="属性值"
          子组件内
              props:{
                属性名:{
                    type:[Number,String],
                    required:是否必填,
                    default:默认值
                             基本数据类型:直接定义
                             复杂数据类型:()=>{return 复杂数据类型}
                    validator:(value)=>{return boolean}
                }
              }  
          子传父（子触发父的方法）
             <子组件标签  @方法名="父组件方法" />
             子组件内:this.$emit('方法名',实参值)  -->
    <ReComment
      ref="reComment"
      :currItem="currItem"
      v-if="bol"
      @reLoad="reLoad"
      @setCount="setCount"
    ></ReComment>
  </div>
</template>
<script>
import {
  comments,
  commentsPost,
  commentLikings,
  commentLikingsDelete
} from '@/api/article'
import ReComment from './reComment.vue'
export default {
  components: {
    ReComment
  },
  data () {
    return {
      list: [],
      offset: null,
      loading: false,
      finished: false,
      content: '',
      currItem: {},
      bol: true
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    // 获取评论列表
    async getData () {
      const res = await comments({
        type: 'a',
        source: this.$route.query.id,
        offset: this.offset,
        limit: 1
      })
      this.list.push(...res.data.results)
      this.loading = false
      this.offset = res.data.last_id
      if (res.data.last_id === res.data.end_id) {
        this.finished = true
      }

      // console.log(res)
    },
    // 发表评论
    async send () {
      if (this.content !== '') {
        // console.log('send')
        const res = await commentsPost({
          target: this.$route.query.id,
          content: this.content
        })
        this.list.unshift(res.data.new_obj)
        // 提示
        this.$toast.success('发表评论成功')
        // 清空输入框内容
        this.content = ''
        // console.log(res)
      } else {
        this.$toast.fail('请先输入内容再点发布')
      }
    },
    // 回复点击
    reClick (item) {
      // 打开弹框
      this.$refs.reComment.isShow = true
      //   修改回复评论的item
      //   this.$refs.reComment.item = item
      this.currItem = item
    },
    // 重置reComment组件
    reLoad () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    setCount () {
      this.currItem.reply_count++
    },
    // 点赞与取消点赞
    async likingClick (item) {
      if (!item.is_liking) {
        // 点赞
        await commentLikings({
          target: item.com_id
        })
        // 提示
        this.$toast.success('点赞成功')
        //
        item.is_liking = true
      } else {
        // 取消点赞
        await commentLikingsDelete(item.com_id)
        // 提示
        this.$toast.success('取消点赞成功')
        //
        item.is_liking = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comment {
  padding: 15px 15px 80px 15px;
  .item {
    display: flex;
    padding: 10px 0;
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 12px;
    }
    .info {
      flex: 1;
      .name {
        color: #94a1ba;
      }
      .content {
        padding: 8px 0;
        line-break: anywhere;
      }
      .other {
        .time {
          color: #8090b5;
          padding-right: 8px;
        }
      }
    }
  }
  .send {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .red {
    color: red;
  }
}
</style>
